<template>
  <el-dialog
    v-loading="loading"
    :visible.sync="dialog"
    title="发送邮件"
    :close-on-click-modal="false"
    width="750px"
    append-to-body
    @close="cancel"
  >
    <div>
      <el-form ref="mailForm" :model="mailBean" :rules="rules" size="small">
        <el-form-item label="主题：" prop="subject">
          <el-input v-model="mailBean.subject" size="mini" style="width: 95%;" />
        </el-form-item>
        <el-form-item label="自定义信息：" prop="buyerMsg">
          <el-input v-model="mailBean.buyerMsg" size="mini" rows="5" type="textarea" style="width: 95%;" />
        </el-form-item>
      </el-form>
    </div>
    <div v-show="showMail" style="margin-top:20px;" v-html="emailMsg" />
    <div slot="footer" class="dialog-footer">
      <el-button type="text" size="small" round @click="cancel">取消</el-button>
      <el-button type="primary" size="small" round @click="doSend">发送</el-button>
      <!-- <el-button type="text" @click="doPerview">预览</el-button> -->
    </div>
  </el-dialog>
</template>

<script>
import { sendCustomEmailToVendor } from '@/api/api'
import { Message } from 'element-ui'

export default {
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      showMail: false,
      mailBean: { subject: '沃尔玛MDA资料未通过审核' },
      emailMsg: '',
      changeType: 0,
      rules: {
        subject: [
          { required: true, message: '请输入邮件主题', trigger: 'blur' }
        ],
        buyerMsg: [
          { required: true, message: '请输入邮件自定义信息', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    cancel() {
      this.emailMsg = ''
      this.changeType = 0
      this.mailBean = { subject: '沃尔玛MDA资料未通过审核' }
      this.showMail = false
      this.dialog = false
    },
    // addEmailMsg() {
    //   return new Promise((resolve, reject) => {
    //     this.$refs.mailForm.validate((valid) => {
    //       if (valid) {
    //         var _buyerMsg = this.mailBean.buyerMsg.replace(/[\n\r]/g, '<br/>')
    //         _buyerMsg = _buyerMsg.replace(/[\s]/g, '&nbsp;')
    //         var _changeType = ''
    //         if (this.changeType === 0) {
    //           _changeType = '新品提报'
    //         } else if (this.changeType === 1) {
    //           _changeType = '商品信息维护'
    //         } else if (this.changeType === 3) {
    //           _changeType = '特号变更'
    //         } else if (this.changeType === 5) {
    //           _changeType = '商品激活'
    //         }
    //         this.emailMsg = '<div style="margin-top:10px;"><span>您好！您申报的如下商品对应资质文件未通过审核：</span></div>'
    //         this.emailMsg += '<div style="margin-top:10px;"><span>您提交的' + _changeType + '需要提交补充MDA相关资料，商品清单如下：</span></div>'
    //         this.parent.items.forEach(element => {
    //           this.emailMsg += '<div><span>UPC: ' + element.upcNbr + '，商品说明1：' + element.item1Desc + '</span></div>'
    //         })
    //         this.emailMsg += '<div style="margin-top:10px;"><span>' + _buyerMsg + '</span></div>'
    //         this.emailMsg += '<div style="margin-top:10px;"><span>请登录MDA系统上传相关资料。</span></div>'
    //         this.emailMsg += '<div style="margin-top:10px;"><span>如需咨询，请联系对应采购，谢谢。</span></div>'
    //         resolve()
    //       } else {
    //         reject()
    //       }
    //     })
    //   })
    // },
    // doPerview() {
    //   this.addEmailMsg().then(() => {
    //     this.showMail = true
    //   })
    // },
    doSend() {
      // this.addEmailMsg().then(() => {
      this.$confirm('确认是否发送邮件？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        sendCustomEmailToVendor({ ids: this.parent.ids, emailSubject: this.mailBean.subject, emailContent: this.mailBean.buyerMsg }, this.changeType).then(() => {
          Message({
            message: '发送成功。',
            type: 'success',
            duration: 3 * 1000
          })
          this.loading = false
          this.dialog = false
        }, error => {
          console.log(error)
          this.loading = false
        })
      })
      // })
    }
  }
}
</script>

